<template>
  <div class="edit-pipeline">
    <div class="header">
      <div class="title">{{ TemplateType[actionType as keyof typeof TemplateType] || TemplateType.add }}</div>
      <div class="tabs">
        <TabsCard :current-tab="activeTab" @change-tab="changeTab" :tabList="tabList" />
      </div>
      <div class="btn-list">
        <a-button
          type="primary"
          class="default-button"
          :loading="onlySaveLoading"
          @click="onlySave"
          v-if="[TemplateType.edit, TemplateType.add].includes(TemplateType[actionType as keyof typeof TemplateType] || TemplateType.add)"
        >
          <template #icon>
            <save-outlined />
          </template>
          保存</a-button
        >
        <a-button class="default-button btn-font" @click="back">
          <template #icon>
            <SvgIcon name="left-arrow" width="16" height="16" />
          </template>
          返回</a-button
        >
      </div>
    </div>
    <div :style="{ boxShadow: '0px 1px 0px 0px #e7eff8', width: '100%' }"></div>
    <div v-if="activeTab === 'flowChoreography'" class="flowChoreography-content">
      <flowChoreography />
    </div>
    <div v-if="activeTab === 'baseInfoCard'" class="box-content">
      <baseInfoCard :actionType="actionType" />
    </div>
    <div v-if="activeTab === 'variablesInfoCard'" class="box-content">
      <variablesInfoCard />
    </div>
  </div>
</template>
<script setup lang="ts">
import { message } from 'ant-design-vue';
import flowChoreography from '@/views/myPipeline/edit/components/flowChoreography.vue';
import variablesInfoCard from './components/variablesInfoCard.vue';
import baseInfoCard from './components/baseInfoCard.vue';
import { SaveOutlined } from '@ant-design/icons-vue';
import { usePipelineTemplateStore } from '@/store/modules/pipelineTemplate';
import { addPipelineTemplate, updatePipelineTemplate } from '@/api/operationManagement';
import { TemplateType } from '@/enums/pipelineEnum';

const pipelineTemplateStore = usePipelineTemplateStore();
const { setActionTypeData } = pipelineTemplateStore;
const activeTab = ref('baseInfoCard');
const router = useRouter();
const route = useRoute();
provide('store', pipelineTemplateStore);
const onlySaveLoading = ref(false);
const changeTab = (key: string) => {
  activeTab.value = key;
};

const tabList = ref([
  {
    key: 'baseInfoCard',
    tab: '模板信息',
  },
  {
    key: 'flowChoreography',
    tab: '流程编排',
  },
  {
    key: 'variablesInfoCard',
    tab: '变量配置',
  },
]);
const back = () => {
  router.go(-1);
};

const actionType = route.params.type || 'add';
setActionTypeData(actionType as string);

onMounted(async () => {
  if ([TemplateType.edit, TemplateType.info].includes(TemplateType[actionType as keyof typeof TemplateType])) {
    await pipelineTemplateStore.fetchPipelineTemplateConfigData(route.params.code as string);
  }
});

onUnmounted(() => {
  pipelineTemplateStore.clearData();
});

const validate = () => {
  const hasErrorValidate = pipelineTemplateStore.getFlowChoreographyData.find(
    (item: Pipeline.Task) => item.isValidateError,
  );
  console.log(pipelineTemplateStore.getBaseInfoData);
  const baseInfoValidate =
    !pipelineTemplateStore.getBaseInfoData.name ||
    !pipelineTemplateStore.getBaseInfoData.componentType ||
    !pipelineTemplateStore.getBaseInfoData.programLanguage;
  if (hasErrorValidate) {
    changeTab('flowChoreography');
    return false;
  }
  if (baseInfoValidate) {
    changeTab('baseInfoCard');
    return false;
  }
  return true;
};

const onlySave = async () => {
  if (!validate()) {
    message.error('校验未通过');
    return;
  }
  try {
    onlySaveLoading.value = true;
    if ([TemplateType.edit, TemplateType.info].includes(TemplateType[actionType as keyof typeof TemplateType])) {
      //编辑，详情模板
      await updatePipelineTemplate({
        ...pipelineTemplateStore.getAllData,
        taskList: pipelineTemplateStore.getFlowChoreographyData.map((item: Pipeline.Task) => ({ ...item, schema: '' })),
        ifRunPipeline: false,
      });
    } else {
      //新增模板
      await addPipelineTemplate({
        ...pipelineTemplateStore.getAllData,
        taskList: pipelineTemplateStore.getFlowChoreographyData.map((item: Pipeline.Task) => ({ ...item, schema: '' })),
        ifRunPipeline: false,
      }).then(() => {
        back();
      });
    }

    message.success('保存成功');
  } finally {
    onlySaveLoading.value = false;
  }
};

// onBeforeMount(() => {
//   setBaseInData(baseInfoData);
//   setTriggerSettingsData(triggerSettingData);
//   setVariablesData(variableSettingListData);
//   setCacheDataData(cacheSettingListData);
// });
</script>
<style lang="less" scoped>
.edit-pipeline {
  background-color: #fff;
  height: 100%;
  .header {
    height: 60px;
    box-shadow: 0px 1px 0px 0px rgba(231, 239, 248, 1);
    border-radius: 4px 4px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 40px;
    .title {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.8);
      font-weight: 400;
      width: fit-content;
      width: 160px;
      display: flex;
      align-items: center;
      &::after {
        content: '';
        display: inline-block;
        width: 1px;
        height: 24px;
        margin-left: 24px;
        background-color: #e7eff8;
      }
    }
    .tabs {
      flex: 1;
    }
    .btn-list {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 16px;
      .default-button {
        border: 1px solid rgba(216, 232, 248, 1);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        display: flex;
        align-items: center;
      }
      .btn-font {
        color: #2590ff;
        gap: 8px;
      }
    }
  }
  .flowChoreography-content {
    margin-top: 2px;
    padding: 20px 40px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    height: calc(100% - 62px);
  }
  .box-content {
    margin-top: 2px;
    padding: 0 40px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    height: calc(100% - 62px);
  }
}
</style>
